<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['shippingLine.add']">新增</el-button>
        </div>
      </div>
    </el-header>

    <div class="pd10">
      <el-table
        :data="shippingList"
        border
        :height="curHeight"
        stripe
        v-loadMore="[payLoads,'shippingLine-list']"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column
          label="线路名称"
          align="center"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="司机姓名"
          align="center"
          prop="driverName"
        >
        </el-table-column>
        <el-table-column
          label="车牌号码"
          align="center"
          prop="carName"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip  class="item" effect="dark" content="编辑" placement="top-start" v-permission="['shippingLine.edit']">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip  class="item" effect="dark" content="删除" placement="top-start" v-permission="['shippingLine.del']" >
                <a style="margin-left: 10px" @click="deleteClick(scope.row)"  >
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer>
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadShippingLine"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import {list,del} from '@/api/shippingLine'
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission'
  import { EventBus } from '@/api/eventBus'
  export default {
    directives: { permission,loadMore},
    name: 'shippingLine-list',
    components:{
      Pagination
    },
    data(){
      return{
        total:0,
        pageSize:20,
        pageNum:1,
        tabsHeight:null,
        curHeight:null,
        payLoads:'',
        shippingList:[]
      }
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    created() {
      this.loadShippingLine()
      EventBus.$on('shippingLine-add', res => { // 监听新增完毕
        // 更新列表数组
        this.shippingList.splice(0, 0, res)
      });
      EventBus.$on('shippingLine-edit', res => { // 监听状态更新
        // 更新列表数组
        for (var i = 0; i < this.shippingList.length; i++) {
          if (this.shippingList[i].id == res.id) {
            this.$set(this.shippingList, i, res)
          }
        }
      })
    },
    methods:{
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 311//减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224//减去页面上固定高度height
              this.tabsHeight = h - 294
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h - 294
      },
      loadShippingLine(){
        var  params=new URLSearchParams()
        params.append('pageSize',this.pageSize)
        params.append('pageNum',this.pageNum)
        list().then(res=>{
          this.shippingList=res.data.data
          this.total=res.data.total
        })
      },
      addClick(){
        this.$router.push({
          path: '/shippingLine/add'
        })
      },
      editClick(data){
        this.$router.push({
          path: '/shippingLine/edit', query: {id: data.id}
        })
      },
      deleteClick(data){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(res=>{
            this.shippingList.forEach((item, index)=> {
              if (item.id == data.id) {
                this.shippingList.splice(index, 1)
              }
            });
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          })
        })

      },
    },
    activated() {
      this.payLoads = new Date().getTime();
    },
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }
  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }
  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  /*.el-footerBox {*/
  /*  height: 50px !important;*/
  /*  line-height: 50px !important;*/
  /*  border-top: 1px solid #eeeeee;*/
  /*  */
  /*}*/
</style>
